<template>
  <div id="app">
    <imooc-header></imooc-header>
    <router-view></router-view>
    <imooc-footer></imooc-footer>
  </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
export default {
  name: 'app',
  components: {
    'imooc-header': Header,
    'imooc-footer': Footer
  },
  watch: {
    $route: {
      handler: function (newVal, oldVal) {
        // 设置进入用户菜单栏选中状态
        if (newVal.matched[1].name === 'UserCenter') {
          this.$store.commit('setMenuId', 0)
        }
        if (newVal.matched[1].name === 'setting') {
          this.$store.commit('setMenuId', 1)
        }
        if (newVal.name === 'message') {
          this.$store.commit('setMenuId', 2)
        }
      },
      deep: true
    }
  }
}
</script>

<style lang="scss">
@import "assets/layui/css/layui.css";
@import "assets/css/global.css";
@import "assets/layui/css/modules/layer/default/layer.css";

// 公用样式
.svg {
  position: relative;
  top: -4px;
}
.grey {
  color: #999;
}
@for $i from 0 to 5 {
  .pd#{$i} {
    padding: $i * 10 + px;
  }
}
</style>
